<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}			
			.x {
				border-radius: 40px;
				left: 50%;
				transform: translateX(-50%);
				position: relative;
				width: 790px;
				height: 340px;
				font-size: 0;
				overflow: hidden;
			}			
			ul {
				width: 999999px;
				height: 340px;
				position: relative;
			}
			
			ul:after {
				content: '';
				display: block;
				clear: both;
			}
			
			li {
				display: inline-block;
				width: 790px;
				height: 340px;
			}
			
			img {
				width: 790px;
				height: 340px;
			}
			
			.left,
			.right {
				position: absolute;
				width: 50px;
				height: 340px;
				background: rgba(0, 0, 0, .5);
				font-size: 20px;
				text-align: center;
				line-height: 340px;
				top: 0;
				z-index: 1;
				cursor: pointer;
				display: none;
			}
			.x:hover .left{
				display: block;
			}
			.x:hover .right{
				display: block;
			}
			.left {
				left: 0;
			}
			
			.right {
				right:0;
			}
			
			span {
				text-align: center;
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background: yellow;
				border-radius: 50%;
				float: left;
				margin: 0 1px;
				cursor: pointer;
				transition: 0.2s linear;
				font-size: 20px;
			}
			
			.btn {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				/*width: 300px;*/
				height: auto;
			}
		</style>
		<div id="caroul" class="x">
			<div class="left">向左</div>
			<ul class="ul">
				<li><img src="img/campIcon_01.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_03.jpg" alt="" /></li>
				<li><img src="img/campIcon_03.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_04.jpg" alt="" /></li>
			</ul>
			<div class="right">向右</div>
			<div class="btn">
				
			</div>
		</div>
		<!--<div id="jay" class="x">
			<div class="left">向左</div>
			<ul class="ul">
				<li><img src="img/campIcon_01.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_03.jpg" alt="" /></li>
				<li><img src="img/campIcon_03.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_04.jpg" alt="" /></li>
			</ul>
			<div class="right">向右</div>
			<div class="btn">
				
			</div>
		</div>-->

		<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
		<script type="text/javascript">
			function bgg(id){	
				console.log(id)
			//左右按钮
			var caroul=document.getElementById(id);
			var left = caroul.getElementsByClassName('left')[0];
			var right = caroul.getElementsByClassName('right')[0];
			var ul = caroul.getElementsByClassName('ul')[0];
			var li = caroul.querySelectorAll('li');
			var lis = li.length;
			var cloneLI = li[0].cloneNode(true); //复制第一张
			var clonelastLI = li[lis - 1].cloneNode(true); //复制最后一张
			ul.appendChild(cloneLI); //加载末尾
			ul.insertBefore(clonelastLI, li[0]); //加载第一张之前
			var width = li[0].offsetWidth; //获取ul宽度
			ul.style.transform = 'translateX(-' + width + 'px)'; //让第一张显示，因为前面还有一张			
			var btn = true; //定义开关按钮
			//当前轮播的索引
			var i = 1;
			var m;
			//动态创建点
			var click=caroul.getElementsByClassName('btn')[0];	
			for(var x=0;x<lis;x++){
				var dian=document.createElement('span');				
				click.appendChild(dian);
			}
			var span = caroul.getElementsByTagName('span');		
			span[0].style.background = 'gray';
			for(var y=0;y<span.length;y++){
				span[y].setAttribute('class',y+1);
				span[y].innerText=y+1;
				span[y].style.color='red';
			}
			click.style.width=span.length*span.offsetWidth+"px";
						
			function goRight() {
				btn = false;	
				i++; //每一张的宽度 * 索引									
				ul.style.transform = 'translateX(-' + (i * width) + 'px)'; //每一次走i * width的距离				
				ul.style.transition = 'all .2s linear'; //添加动画	
				//四个点的触发事件
				for(var j = 0; j < span.length; j++) {
					span[j].style.background = 'yellow';
				}
				if(i-1<span.length){
					span[i - 1].style.background = 'gray';
				}
				else{
					span[0].style.background = 'gray';
				}												
				//监听transition结束的时候
				ul.addEventListener("transitionend", function() {
					btn = true;
					if(i == li.length + 1) {
						//到达轮播的最后一张（克隆第一张的那个）
						//重置动画时间，瞬间完成					
						ul.style.transition = 'none';						
						i = 1;
						//回到起始位置
						ul.style.transform = 'translateX(-' + i * width + 'px)';
						//重新计算样式，阻断线程
//						setTimeout(0);
//						ul.style.transition = 'all 0s linear';
					}

				})
			}
			//阻断事件，当点击一次时，btn为false,当监听事件执行完，btn为true，如果在没有执行完监听事件，btn还是为false，goright()事件不起作用
			right.addEventListener('click',function(){
				if(btn==true){
					goRight();
				}
			})
			//定时器
			var time_right=window.setInterval(goRight,2000);
			//事件取消和开始
			function over(){			
					caroul.addEventListener('mouseover',function(){
						clearInterval(time_right);
					})
					caroul.addEventListener('mouseout',function(){
						time_right=window.setInterval(goRight,2000);
					})				
			}over();
			//四个点的点击事件			
			function spans() {
				for(var m= 0; m < span.length; m++) {
					span[m].addEventListener('click', function(e) {
						var x = parseInt(e.target.className);
						i=x;
						ul.style.transform = 'translateX(-' + x* width + 'px)';
						ul.style.transition = 'all .2s linear';
						for(var j = 0; j < span.length; j++) {
							span[j].style.background = 'yellow';
						}
						span[x-1].style.background = 'gray';
					})					
				}
			}
			spans();			
			function goLeft() {
				btn = false;					
				i--; //每一张的宽度 * 索引	
				ul.style.transform = 'translateX(-' + (i * width) + 'px)'; //走到第一张的前一张
				ul.style.transition = 'all .2s linear'; //添加动画			
				//点的背景色
				for(var j = 0; j < span.length; j++) {
					span[j].style.background = 'yellow';
				}				
				if(i>0){
					span[i - 1].style.background = 'gray';
				}
				else{
					span[span.length-1].style.background = 'gray';
				}									
				//监听transition结束的时候
				ul.addEventListener("transitionend", function() {
					btn = true;
					if(i == 0) {
						//重置动画时间，瞬间完成
						span[span.length-1].style.background = 'gray';
						ul.style.transition = 'none';
						i = li.length;
						ul.style.transform = 'translateX(-' + i * width + 'px)';
					}

				})
			}
			//阻断事件，当点击一次时，btn为false,当监听事件执行完，btn为true，如果在没有执行完监听事件，btn还是为false，goright()事件不起作用
			left.addEventListener('click',function(){
				if(btn==true){
					goLeft();
				}
			})
		}
//			bgg("jay");
			bgg("caroul");
		
			
			/*//jq方法
			$('#right').on('click',function(){
					i++;
					m = i * 790 * -1;
				$('ul').animate({'margin-left':m},100,'linear',function(){
					if(i == li.length + 1) {
						i = 1;
						//设置样式的时候，使用字符串的时候要加上单位
						$('ul').css({'margin-left':'-'+width+'px'});
					}
				})
			})*/

			//

			//				function go(forw) {
			//					//如果传入的值是左边，i--，i++
			//					forw=='left'?i--:i++;
			//					
			//					btn = false;
			//					
			//					ul.style.transform = 'translateX(-' + (i * width) + 'px)';
			//					//监听transition结束的时候
			//					ul.addEventListener("transitionend", function() {
			//						btn = true;
			//						if(i == li.length + 1) {
			//							//到达轮播的最后一张（克隆第一张的那个）
			//							//重置动画时间，瞬间完成
			//							ul.style.transition = 'none';
			//							i = 1;
			//						}
			//						if(i == 0) {
			//							//到达轮播的最后一张（克隆第一张的那个）
			//							//重置动画时间，瞬间完成
			//							ul.style.transition = 'none';
			//							i = li.length;
			//
			//						}
			//						
			//						
			//						ul.style.transform = 'translateX(-' + i*width + 'px)';
			//						//重新计算样式，阻断线程
			//						getComputedStyle(ul).width;
			//						ul.style.transition = 'all .2s linear';
			//					})
			//				}

			//
		</script>

	</body>

</html>